<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    
    <!--表示使用IE最新的渲染模式进行解析-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--
    	兼容一些移动设备，会根据屏幕的大小缩放
    	width=device-width  表示宽度是设备的宽度（很多手机的宽度都是980px）
    	initial-scale=1  初始化缩放级别   1-5
    	minimum-scale=1  maximum-scale=5
    	user-scalable=no  禁止缩放
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>主讲人管理</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    
    <!-- 如果IE版本小于9，加载以下js,解决低版本兼容问题 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    
    <!--
    	引入网络的jquery  ,如果想换成自己的，导入即可
    	网站优化：建议将你网站的css\js等代码，放置在互联网公共平台上维护，比如：七牛
    -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    
    <script src="js/bootstrap.min.js"></script>
    <script src="js/confirm.js"></script>
    <style type="text/css">
    	  th{
    	  	 text-align: center;
    	  }
    </style>
    <script type="text/javascript">
    function showAddPage() {
		location.href = "addSpeaker.action";
	}
	function delSpeakerById(obj, id, name) {

		Confirm.show('溫馨提示', '您確定要刪除' + name + '嗎？', {
			'Delete' : {
				'primary' : true,
				'callback' : function() {
					//此处需要调用ajax
					var params = {
						"id" : id
					};
					$.post("speakerDel.action", params, function(data) {
						if (data == 'success') {
							Confirm.show('处理结果', '恭喜您删除成功');
							//请用js删除掉那条记录
							$(obj).parent().parent().remove();
						} else {
							Confirm.show('处理结果', '操作失败');
						}
					});

				}
			}
		});

		//阻止事件默认行为   a  href  onclick  
		//先执行onclick  后跳转
		return false;
	}
	$(function() {
		$("#btn").click(function() {
			if (deleteNum > 0) {

				Confirm.show('溫馨提示', '您確定要刪除这' + deleteNum + '条记录嗎？', {
					'Delete' : {
						'primary' : true,
						'callback' : function() {
							//不是ajax，模拟提交
							$("form").submit();
							//如果是一个正常表单的提交，按钮必须是type=submit,并且必须在form表单里面
						}
					}
				});

			}

		});

	});
	var deleteNum = 0;
	function selectAll(obj) {
		//dom  jquery
		var value = obj.checked;
		//alert(value);
		var arr = document.getElementsByName("ids");
		for (var i = 0; i < arr.length; i++) {
			arr[i].checked = value;
		}
		if (value) {
			deleteNum = arr.length;
		} else {
			deleteNum = 0;
		}

		$("#delNum").text(deleteNum);

	}

	function selectOne(obj) {
		if (obj.checked) {
			deleteNum += 1;
		} else {
			deleteNum -= 1;
		}

		if (deleteNum == 0) {
			document.getElementById("checkAllId").checked = false;
		}

		var arr = document.getElementsByName("ids");
		if (deleteNum == arr.length) {
			document.getElementById("checkAllId").checked = true;
		}

		$("#delNum").text(deleteNum);
	}
    </script>
  </head>
  <body>
  	
  	
    <nav class="navbar-inverse">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          
          <a class="navbar-brand" href="videoList.action">视频管理系统</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
          <ul class="nav navbar-nav">
            <li ><a href="videoList.action">视频管理</a></li>
            <li class="active"><a href="showSpeakerList.action">主讲人管理</a></li>
            <li><a href="showCourseList.action">课程管理</a></li>
            
            
          </ul>
          <p class="navbar-text navbar-right">
					<span>${userName}</span> <i class="glyphicon glyphicon-log-in"
						aria-hidden="true"></i>&nbsp;&nbsp;<a href="exit.action"
						class="navbar-link">退出</a>
				</p>
        </div><!-- /.navbar-collapse -->
        
        
      </div><!-- /.container-fluid -->
    </nav>
    
    <div class="jumbotron" style="padding-top: 15px;padding-bottom: 15px;">
        
	    <div class="container">
	          <h2>主讲人管理</h2>
	    </div>
	  </div>

	<div class="container">
		
			<button onclick="showAddPage()" type="button"
				class="btn btn-info dropdown-toggle" data-toggle="dropdown"
				aria-haspopup="true" aria-expanded="false">添加</button>
			<button id="btn" class="btn btn-primary" type="button">
				批量删除 <span class="badge" id="delNum">0</span>
			</button>

	</div>
	
	<div class="container">
		 
	</div>
	
	<div class="container" style="margin-top: 20px;">
		 <form action="delBatchSpeakers.action" method="post">
		<table class="table table-bordered table-hover" style="text-align: center;">
      <thead >
        <tr class="active">
            <th><input type="checkbox" onclick="selectAll(this)"
							id="checkAllId" /></th>
			<td>序号</td>				
           <th>姓名</th>
          <th>职位</th>
          <th>简介</th>
          <th>编辑</th><th>删除</th>
        </tr>
      </thead>
      <tbody>
       
        <c:forEach items="${list}" var="speaker" varStatus="status">
        <tr>
            <td><input type="checkbox" name="ids" value="${speaker.id}"
								onclick="selectOne(this)" /></td>
		    <td>${status.index+1}</td>
           <td>${speaker.speakerName}</td>
           <td>${speaker.speakerJob}</td>
           <td>${speaker.speakerDesc}</td>
           <td><a href="speakerEdit.action?id=${speaker.id}"><span
									class="glyphicon glyphicon glyphicon-edit" aria-hidden="true"></span></a></td>
          <td><a onclick="return delSpeakerById(this,'${speaker.id}','${speaker.speakerName}')"><span
									class="glyphicon glyphicon-trash" aria-hidden="true"></span></a></td>
        </tr>
        </c:forEach>
        </tbody>
      </table>
      </form>
	</div>
  </body>
</html>